<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

  <script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
  <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>

  <script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>

</head>

<body>


  <table class="layui-hide" id="guaranteeTable" lay-filter="guaranteeTable"></table>

  <script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="guaranteeadd">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="guaranteesdel">批量删除</button>
    <!-- <button class="layui-btn layui-btn-sm" lay-event="isAll"></button> -->
  </div>
</script>


  <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>





  <script>
    layui.use('table', function () {
      var table = layui.table;

      table.render({

        elem: '#guaranteeTable'
        , url: 'http:///localhost:8080/guarantee/guaranteeList'
        // ,toolbar: true
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , title: '保修单'
        // ,totalRow: true
        , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
          title: '提示'
          , layEvent: 'LAYTABLE_TIPS'
          , icon: 'layui-icon-tips'
        }]
        , cols: [[
          { type: 'checkbox', fixed: 'left' },
          // 是否全选默认不全选
          // {LAY_CHECKED:false},
          { field: 'guarantee_id', title: 'ID', fixed: 'left', unresize: true, sort: true }
          , { field: 'guarantee_years', title: '保修年限', edit: 'text', sort: true }
          , { field: 'guarantee_state', title: '保修状态', edit: 'text' }
          , { field: 'guarantee_buydate', title: '购买日期', sort: true }
          , { field: 'guarantee_com', title: '出厂公司', edit: 'text' }
          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }


        ]]
        , page: true
        , response: {
          statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
        }
        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
          return {
            "code": res.code, //解析接口状态
            "msg": res.message, //解析提示文本
            "count": res.data.count, //解析数据长度
            "data": res.data.guarantees //解析数据列表
          };
        }
      });

      //头工具栏事件
      table.on('toolbar(guaranteeTable)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {

          // 添加
          case 'guaranteeadd':
            {
              var index = layer.open({
                title: '添加保修单',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['80%', '80%'],
                content: 'guaranteelistadd.html',
                //列表重新加载
                end: function (index) {
                  table.reload('guaranteeTable');
                }
              });
            };
            break;
          // 批量删除
          case 'guaranteesdel':
            // 选中的数据
            var data = checkStatus.data;
            $.ajax({
              type: "post",
              url: "http://localhost:8080/guarantee/guaranteeDel",
              contentType: "application/json",
              data: JSON.stringify(data),
              dataType: "json",
              success: function (res) {

                if (res.code == 0) {
                  layer.msg('删除成功', function () {

                    table.reload('guaranteeTable');
                    // 关闭弹出层
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                    layer.close(index)
                    table.reload("#guaranteeTable")

                  })

                } else {
                  layer.msg('删除失败', function () {

                  });
                }
              }

            })

            break;

          // case 'isAll':
          //   layer.msg(checkStatus.isAll ? '全选': '未全选');
          // break;

          //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
            break;
        };





      });
      //监听行工具事件
      table.on('tool(guaranteeTable)', function (obj) {
        var data = [obj.data];
        console.log(obj)
        // 将读取的一行数据存储到局部存储器
        var localhostStr = localStorage.setItem("localhostStr", JSON.stringify(obj.data));

        if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            obj.del();

            $.ajax({
              type: "post",
              url: "http://localhost:8080/guarantee/guaranteeDel",
              contentType: "application/json",
              data: JSON.stringify(data),
              dataType: "json",
              success: function (res) {

                if (res.code == 0) {
                  layer.msg('删除成功', function () {


                    // 关闭弹出层
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                    layer.close(index)
                    table.reload('guaranteeTable');

                  })

                } else {
                  layer.msg('删除失败', function () {

                  });
                }
              }

            })


            layer.close(index);
          });


        } else if (obj.event === 'edit') {
          var index = layer.open({
            title: '编辑保修单',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: 'guaranteeedit.html',
            //列表重新加载
            end: function (index) {
              table.reload('guaranteeTable');
            }

          });

          $(window).on("resize", function () {
            layer.full(index);
          });

          return false;
        }
      });



    });
  </script>

</body>

</html>